<template>
  <div class="index">
    <div>
      <div class="container">
        <Banner></Banner>
        <PicShow :pic-show="picShow"></PicShow>
      </div>
    </div>
    <div class="u-fx-jc tab-list">
      <a-tabs :default-active-key="0" @change="change">
        <a-tab-pane
          v-for="tab in tabList"
          :key="tab.id"
          :tab="tab.title"
        ></a-tab-pane>
      </a-tabs>
    </div>
    <div class="u-bg-color" style="padding-top: 20px">
      <div class="container">
        <ImgList :img-list="imgList"></ImgList>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { mapState, mapMutations } from 'vuex'
import Banner from './component/Banner.vue'
import PicShow from './component/PicShow.vue'
import ImgList from './component/ImgList.vue'
export default {
  components: {
    Banner,
    PicShow,
    ImgList,
  },
  async asyncData({ $axios }) {
    const imgRes = await $axios.get('http://42.194.220.14:3000/mock/18/imgList')
    const picRes = await $axios.get('http://42.194.220.14:3000/mock/18/picShow')
    const bannerRes = await $axios.get(
      'http://42.194.220.14:3000/mock/18/bannerList'
    )
    return {
      bannerList: bannerRes.data.data,
      imgList: imgRes.data.data,
      picShow: picRes.data.data,
    }
  },
  data() {
    return {
      tabList: [
        {
          title: '首页推荐',
          id: 0,
        },
        {
          title: '我的关注',
          id: 1,
        },
        {
          title: '全部推荐',
          id: 2,
        },
      ],
    }
  },
  computed: {
    ...mapState('home', ['current']),
  },
  mounted() {
    this.allArr = JSON.parse(JSON.stringify(this.imgList))
  },
  methods: {
    ...mapMutations('home', ['setState']),
    goList() {
      this.$router.push('/list')
    },
    change() {
      this.imgList = this.allArr.slice(0, Math.floor(Math.random() * 20))
    },
  },
}
</script>

<style lang="less" scoped>
.tab-list {
  margin: 20px 0;
}
</style>
